<template>
	<div>
		<Modal :width="800" :title="info.title" v-model="info.show" :styles="{top: '20px'}">
			<Form :model="formItem" :label-width="80">
				<Row>
					<Col span="16">
					<Row>
						<Col span="12">
							<FormItem label="工号">
								<Input v-model="info.formItem.employee_num" placeholder="请输入工号"></Input>
							</FormItem>
							<FormItem label="身份证">
								<Input v-model="info.formItem.id_card" placeholder="请输入身份证"></Input>
							</FormItem>
							<FormItem label="联系电话">
								<Input v-model="info.formItem.phone" placeholder="请输入联系电话"></Input>
							</FormItem>
							<FormItem label="毕业学校">
								<Input v-model="info.formItem.graduate_school" placeholder="请输入毕业学校"></Input>
							</FormItem>
							<FormItem label="目前状态">
								<RadioGroup v-model="info.formItem.status">
									<Radio label="probation">试用</Radio>
									<Radio label="working">在职</Radio>
									<Radio label="leaving">离职</Radio>
								</RadioGroup>
							</FormItem>
							<FormItem label="离职时间">
								<DatePicker type="date" placeholder="请选择离职时间" v-model="info.formItem.leaving_date"></DatePicker>
							</FormItem>
						</Col>
						<Col span="12">
							<FormItem label="姓名">
								<Input v-model="info.formItem.name" placeholder="请输入目前姓名"></Input>
							</FormItem>
							<FormItem label="性别">
								<RadioGroup v-model="info.formItem.sex">
									<Radio label="male">男</Radio>
									<Radio label="female">女</Radio>
								</RadioGroup>
							</FormItem>
							<FormItem label="学历">
								<Select v-model="info.formItem.edu_background" placeholder="请选择学历">
									<Option value="小学">小学</Option>
									<Option value="初中">初中</Option>
									<Option value="高中">高中</Option>
									<Option value="专科">专科</Option>
									<Option value="本科">本科</Option>
									<Option value="硕士">硕士</Option>
									<Option value="博士">博士</Option>
								</Select>
							</FormItem>

							<FormItem label="所属市场">
								<Input v-model="info.formItem.market" placeholder="请输入所属市场"></Input>
								<!--<Select v-model="formItem.market" multiple >
							        <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
							    </Select>-->
							</FormItem>
							<FormItem label="入职时间">
								<DatePicker type="date" placeholder="请选择入职时间" v-model="info.formItem.report_date"></DatePicker>
							</FormItem>
						</Col>
					</Row>
					</Col>
					<Col span="8"> 
						<div class="info-img">
							<img :src="info.formItem.photo" />
						</div>
						<FormItem>
							<Upload action="//jsonplaceholder.typicode.com/posts/">
					        	<Button type="ghost" icon="ios-cloud-upload-outline">上传</Button>
					   		</Upload>
						</FormItem>
					</Col>
				</Row>
				<FormItem label="身份证照片/复印件照片" :label-width="153">
					<Upload action="//jsonplaceholder.typicode.com/posts/">
				        <Button type="ghost" icon="ios-cloud-upload-outline">上传</Button>
				    </Upload>
				</FormItem>
				<div class="id-card-photo">
					<img :src="info.formItem.id_card_photo" />
				</div>
			</Form>
			<div slot="footer">
        		<Button type="ghost" @click="()=>{info.show=false}" >取消</Button>
        		<Button type="primary" @click="save" style="margin-left: 8px">保存</Button>
		    </div>
		</Modal>
	</div>
</template>

<script>
	export default {
		props:['info'],
		data() {
			return {
				formItem: {
					"id":"",
					"employee_num" : "" ,
					"name" : "" ,
					"id_card" : "" ,
					"sex" :"",
					"phone" : "" ,
					"edu_background":"" ,
					"graduate_school" :"" ,
					"id_card_photo" :"" ,
					"market" :"",
					"status":"",
					"report_date":"",
					"leaving_date" :"" ,
					"photo":""  ,
					"region":"" ,
					"tenant_id":""
				},
//				cityList: [
//                  {
//                      value: 'New York',
//                      label: 'New York'
//                  },
//                  {
//                      value: 'London',
//                      label: 'London'
//                  },
//                  {
//                      value: 'Sydney',
//                      label: 'Sydney'
//                  },
//                  {
//                      value: 'Ottawa',
//                      label: 'Ottawa'
//                  },
//                  {
//                      value: 'Paris',
//                      label: 'Paris'
//                  },
//                  {
//                      value: 'Canberra',
//                      label: 'Canberra'
//                  }
//              ],
			}
		},
		methods: {
				save(){
					console.log("save");
//					 var _data={
//						"edu_background": "本科",
//						  "employee_num": "0007",
//						  "graduate_school": "杭州师范大学",
//						  "id_card": "330354187714158794",
//						  "id_card_photo": "http://imgtu.5011.net/uploads/content/20170414/6256421492148399.jpg",
//						  "leaving_date": "2017-10-27",
//						  "market": "|1|2|3|",
//						  "name": "光头强",
//						  "phone": "13783654321",
//						  "photo": "http://imgtu.5011.net/uploads/content/20170414/6256421492148399.jpg",
//						  "region": "杭州",
//						  "report_date": "2017-10-27",
//						  "sex": "male",
//						  "status": "working",
//						  "tenant_id": "1"
//              	}
					this.$ajax({
						url: "http://101.132.156.26:1000/employee",
						method: this.info.method,
						data: this.info.formItem
					}).then((d) => {
						console.log(d);
						if(d.message==="success"){
							this.$Message.success('保存成功');
							this.info.show=false;
							this.$emit('upup');
							console.log("chenggong")
						}else{
							this.$Message.warning(d.message);
							
						}
					})
				}
		},
		componets: {
			
		},
		mounted() {
		}
	}
</script>

<style lang="less" scoped>
	.info-img{
		width: 100%;
	    height: 245px;
	    padding: 16px;
	}
	.ivu-modal-header,.ivu-modal-footer{
		border: none!important;
	}
</style>